<template>
  <scroll-view class="scroll-view" enable-back-to-top scroll-y>
    <view class="signs">
      <view class="sign" v-for="(item, index) in signList" :key="index" @tap="toSignList(item.id)">
        <view class="title">
          <view class="name">{{ item.name }}</view>
          <view class="num">{{ item.children?.length }}张<text class="icon-right"></text>
          </view>

        </view>
        <view class="content">
          <view class="icons">
            <image class="icom-item" :src="iconItem.imgUrl" mode="widthFix"
              v-for="(iconItem, iconIndex) in item.children!.filter(img => img.listDisplay == '1')" :key="iconIndex" />
          </view>
        </view>

      </view>
    </view>
  </scroll-view>

</template>

<script lang="ts" setup>
  import { ref, computed, onMounted, nextTick } from 'vue'
  import type { SignVo } from '@/api/base/types'
  import { useSignsStore } from '@/stores/modules/signs_store'

  const props = defineProps<{
    baseType: string
  }>()

  const signsStore = useSignsStore()
  // 题库类型
  const baseType = computed(() => props.baseType)
  // 标志列表
  const signList = computed(() => signsStore.signs)

  // 去标志列表
  const toSignList = (signParentId: number | undefined) => {
    uni.navigateTo({
      url: `/pagesSign/signList/signList?baseType=${baseType.value}&signParentId=${signParentId}`
    })
  }
</script>

<style lang="scss" scoped>
  .scroll-view {
    height: 100%;
  }

  .signs {
    height: 100%;
    margin-top: 30rpx;

    .sign {
      display: flex;
      flex-direction: column;
      margin-top: 30rpx;
      padding: 0 30rpx;

      border-bottom: 2rpx solid #f5f5f5;

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 30rpx;
        color: #323232;

        .num {
          font-size: 28rpx;
          color: #b3b3b3;

          .icon-right {
            margin-left: 20rpx;
            font-size: 23rpx;
          }
        }
      }

      .content {
        padding: 30rpx 0;

        .icons {
          display: flex;
          justify-content: space-around;
          align-items: center;

          .icom-item {
            width: 130rpx;
          }
        }
      }

    }
  }

</style>
